<template>
  <div class="home">
    <!-- 定义页面的结构 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="常用地址"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div class="content">
      <div class="address_content">
        <van-address-list
          v-model="chosenAddressId"
          :list="addressList"
          default-tag-text="默认"
          add-button-text="新增地址"
          @add="confirmaddress"
          @edit="onEdit"
        />
      </div>

      <van-action-sheet v-model="show" :title="title">
        <div class="address_content">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="username"
              label="姓名"
              placeholder="请输入收货人姓名"
              :rules="[{ required: true, message: '请输入正确的收货人姓名' }]"
            />
            <van-field
              v-model="telephone"
              name="telephone"
              label="电话"
              placeholder="请输入电话号码"
              :rules="[{ required: true, message: '请输入正确的电话号码' }]"
            />
            <van-field
              clickable
              name="area"
              :value="value"
              label="地区选择"
              placeholder="点击选择省市区"
              @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
              <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
                @change="onChange"
              />
            </van-popup>
            <van-field
              v-model="detailAddress"
              name="detailAddress"
              label="详细地址"
              placeholder="请输入详细地址"
              :rules="[{ required: true, message: '请输入正确的地址' }]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </div>
      </van-action-sheet>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/http/axios";
import { areaList } from "@vant/area-data";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      areaList,
      chosenAddressId: 2300,
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
        },
      ],
      addressData: {},
      show: false,
      title: "编辑地址",
      username: "",
      value: "",
      showArea: false,
      areaData: [],
      telephone: "",
      detailAddress: "",
      id: "",
      area: "",
      province: "",
      city: "",
    };
  },
  computed: {
    addressList() {
      // 筛选地址数据 生成匹配组件的数据
      let addressArr = this.addressData.list;
      let addressList = [];
      if (!addressArr) {
        return;
      }
      addressArr.forEach((item, index) => {
        let addressObj = {};
        (addressObj.id = item.id),
          (addressObj.name = item.username),
          (addressObj.tel = item.telephone),
          (addressObj.address =
            item.province + item.city + item.area + item.address),
          (addressObj.isDefault = item.isDefault);
        addressList.push(addressObj);
      });
      return addressList;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async getAddressData() {
      let data = {
        page: 1,
        pageSize: 100,
      };
      let res = await get("/address/pageQuery", data);
      // 将拿到的数据赋值给轮播图数组
      this.addressData = res.data.data;
      return res;
    },
    onEdit(item, index) {
      this.id = this.addressData.list[index].id;
      this.username = this.addressData.list[index].username;
      this.telephone = this.addressData.list[index].telephone;
      this.detailAddress = this.addressData.list[index].address;
      this.value =
        this.addressData.list[index].province +
        "-" +
        this.addressData.list[index].city +
        "-" +
        this.addressData.list[index].area;
      console.log(item);
      this.show = true;
    },
    confirmaddress(item, index) {
      this.show = true;
      this.username = "";
      this.telephone = "";
      this.detailAddress = "";
      this.id = "";
    },
    async onSubmit(values) {
      let data = {
        id: this.id,
        username: this.username,
        telephone: this.telephone,
        province: this.areaData[0].name,
        city: this.areaData[1].name,
        area: this.areaData[2].name,
        address: this.detailAddress,
      };
      let res = await post("/address/saveOrUpdate", data);

      if (res.status == 200) {
        this.show = false;
        this.getAddressData();
      } else {
        this.$message.error(res.message);
      }
    },
    onChange(picker, index, value) {
      let val = picker.getValues();
      let areaName = "";
      for (var i = 0; i < val.length; i++) {
        areaName = areaName + (i == 0 ? "" : "-") + val[i].name;
      }
    },
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("-");
      this.areaData = values;
      this.showArea = false;
    },
  },
  created() {
    this.getAddressData().then((res) => {
      console.log(res.data.data.list, "----------");
      this.content =
        "姓名" +
        res.data.data.list[0].username +
        "电话" +
        res.data.data.list[0].telephone +
        "地址" +
        res.data.data.list[0].address;
    });
  },
};
</script>

<style scoped>
.address_content {
  padding: 16px 16px 160px;
}
</style>